<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 左侧放大镜容器 -->
	<div class="main">
		<div class="smallBox"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="./img/timg.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>
        </div>
        <!-- 缩略图 -->
		<div class="choice-btn">
            <img src="./img/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="bigBox">
		<!-- 大图图片 -->
		<img src="./img/timg.jpg" alt="">
    </div>
    <script>

        /* 
            思路：
                * 构造函数
                    + 确定元素
                    + 初始化索引值
                    + 绑定方法
                * 原型对象
                    + 绑定事件：滑入、滑出、移动、切换
                    + 确定放大镜在小盒子的边界
                    + 设置比例以确定大图在大图盒子的移动边界
                * 实例对象
        */


        // 构造函数
        function Magnifier(){
            // 获取元素并设置为构造函数属性：放大镜、小图、小图盒子、大图盒子、大图、缩略图
            this.grayBox = document.querySelector('.grayBox');
            this.smallBox = document.querySelector('.smallBox');
            this.sImg = document.querySelector('.smallBox img');
            this.bigBox = document.querySelector('.bigBox');
            this.bImg = document.querySelector('.bigBox img');
            this.imgList = document.querySelectorAll('.choice-btn img');
            // 初始化缩略图索引
            this.index = 0;

            // 获取各元素宽高
            this.smallBox_size = {
                width: parseInt(getComputedStyle(this.smallBox).width),
                height: parseInt(getComputedStyle(this.smallBox).height)
            }
            this.bigBox_size = {
                width: parseInt(getComputedStyle(this.bigBox).width),
                height: parseInt(getComputedStyle(this.bigBox).height)
            }
            this.bImg_size = {
                width: parseInt(getComputedStyle(this.bImg).width),
                height: parseInt(getComputedStyle(this.bImg).height)
            }
            
            // 调用方法
            this.bindEvent();
        }

        // 原型对象：事件绑定->鼠标移入、鼠标滑动、鼠标移出
        Magnifier.prototype.bindEvent = function(){

            var self = this;
            // 元素显示隐藏;
            this.smallBox.onmouseover = function(){
                self.grayBox.style.display = "block";
                self.bigBox.style.display = "block";
            }
            this.smallBox.onmouseout = function(){
                self.grayBox.style.display = "none";
                self.bigBox.style.display = "none";
            }
            // 移动
            this.smallBox.onmousemove = function(e){
                // 兼容
                var e = e || event;
                // 设置放大镜到小盒的左上距离
                var _left = e.offsetX - 50;
                var _top = e.offsetY - 50;
                // 获取并限制边界(注意边框)
                var sleft_max = self.smallBox.offsetWidth - self.grayBox.offsetWidth - 8;
                var stop_max = self.smallBox.offsetHeight - self.grayBox.offsetHeight - 8;
                
                if(_left<0){
                    _left = 0;
                }
                if(_left>sleft_max){
                    _left = sleft_max;
                }
                if(_top<0){
                    _top = 0;
                }
                if(_top>stop_max){
                    _top = stop_max;
                }

                // 定位放大镜
                self.grayBox.style.left = _left + 'px';
                self.grayBox.style.top = _top + 'px';
                
                // 设置比例
                var left_scale = (_left/sleft_max).toFixed(2);
                var top_scale = (_top/stop_max).toFixed(2);
                // console.log(left_scale,top_scale);
                
                // 确定大图边界值：大图宽高-大图盒子宽高
                var bleft_max = self.bImg_size.width - self.bigBox_size.width;
                var btop_max = self.bImg_size.height - self.bigBox_size.height;
                // console.log(bleft_max,btop_max);

                // 确定大图位置
                self.bImg.style.left = - bleft_max*left_scale + 'px';
                self.bImg.style.top = - btop_max*top_scale + 'px';
            }
            
            // 缩略图切换
            for(var i=0;i<self.imgList.length;i++){
                // 給每张缩略图绑定索引值并绑定鼠标事件
                this.imgList[i].index = i;
                this.imgList[i].onmouseover = function(){
                    // 事件里的this指绑定DOM，更新self的属性值
                    self.index = this.index;
                    self.sImg.src = this.src;
                    self.bImg.src = this.src;
                }
            }
        }

        // 实例对象
        var mf = new Magnifier();

    </script>
</body>
</html>